<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	#canvas1{
		border: 1px solid #000;
	}
	</style>
</head>
<body>
	<canvas id='canvas1' width=500 height=500></canvas>
	<img src="images/1.jpg"  alt="">
	<script src="js/gaussFun.js"></script>
	<script>
	var myCanvas = document.getElementById('canvas1');
	var ctx = myCanvas.getContext("2d");
	var myImg = document.getElementsByTagName('img')[0];
	window.onload =function(){
	ctx.drawImage(myImg, 0, 0, 500, 500);
	var mypix = ctx.getImageData(0, 0, 500, 500);
	var newpix=gaussBlur(mypix);
	ctx.putImageData(newpix, 0,0);
	}


	</script>

</body>
</html>